MyModules.define('slider',[],function(){

	class Child extends WidgetObject {
	    constructor() {
	        super(); // 调用父类构造函数
	        // 子类可以添加自己的属性或方法
	        this.name = '輪播圖';
		    this.datas.name = this.name;
		    this.datas.value = {
				content:{},
				class:'',
				class_id:'',
				style:''
			};
		    this.getHtml = function () {
				var str = '<div class="wrap-widget sliderWidget" data-id="'+this.datas.id+'"  data-original-title="'+this.datas.name+'" data-toggle="tooltip">';
				if(!empty(this.datas.value['content']) && !empty(this.datas.value['content']["path"]) && this.datas.value['content']["path"].length){
					for(var i=0; i<this.datas.value['content']["path"].length; i++ ){
						str += '<div class="item"><img src="'+formatUrl(this.datas.value['content']["path"][i])+'" /></div>';
						if(i >4) break;
					}
				}
				str += '</div>';
				return str;
			};
			this.saveData = function(){
				var values = $("#myModal form").serializeArray();
				var contents = []
				var options = []
				for(var x of values){
					if(x['name'] == 'content'){
						contents.push(x['value']);
					}else if(x['name'] == 'options'){
						options.push(x['value']);					
					}
				}
				this.datas.value = arrayToObject(values);
				this.datas.value['content'] = {"path":contents, "options":options}
			};
	        this.inputTemplate = function(){
		        var str = '<button type="button" class="btn btn-success" data-type="addsilerrow" data-id="'+this.datas.id+'">添加圖片</button><div class="x_content">';
				if(!empty(this.datas.value['content']["path"])){
					row_slider_index = 0;
					for(var i=0; i < this.datas.value['content']["path"].length; i++){
						str += renderSliderItem(this.datas.id+'-'+i, this.datas.value['content'], i);
						row_slider_index++;
					}
				}
				str += '</div>';
				return str;
	        };
	    }
	}
	return new Child();
});
var row_slider_index = 0
$(document).on("click", "[data-type='addsilerrow']", function(){
	var id = $(this).data("id");
	
	i = row_slider_index;
	str = renderSliderItem(id+"-"+i);
	$("#home > .x_content").append(str);
	row_slider_index++;
});


function renderSliderItem(id, value, i){
	
	var image='',
	content='';
	var url = buildUrl(urlInfo.upload.iframe,{
		type:0,
		relative_url:1,
		akey:apkey,
		field_id:'input-'+id,
	});
	if( typeof(value)!="undefined" ){
		image = value['path'][i];
		content = value['options'][i];
	}
	var shtml = `<div class="form-group ">
	<div class="input-group">
	<input class="form-control" name="content" id="input-${id}" value="${image}">
	<div class="input-group-btn">
	<a href="${url}" class="btn btn-primary btn-rf-image" img-fancybox data-id="input-${id}">選擇圖片</a>
	<button type="button" class="btn btn-danger" data-type="select-delete" data-id="input-${id}"><i class="glyphicon glyphicon-trash"></i></button>
	</div></div>
	<div><textArea placeholder="內容" name="options" class="form-control">${content}</textArea></div>
	</div>`;
	return shtml;
}